<template>
  <div class="list-temple">
    <!-- /**
    *@description:这是一个点击显示或者隐藏子内容列表
    */ -->
    <div class="listtemple-title">{{ nmtitle }}</div>
    <div v-for="(item,index) in zhlist" :key="index" class="list-all">
      <div class="list-name" @click="item.show = !item.show">
        {{ item.name }}
        <i v-if="item.show" class="el-icon-arrow-down icon-li"></i>
        <i v-if="!item.show" class="el-icon-arrow-up icon-li"></i>
      </div>
      <ul v-if="item.child && item.child.length>0 && item.show === true">
        <li v-for="(hit,hin) in item.child" :key="hin" :class="hit.isclick === true ?'backline':''" @click="getlimes(hit, index, hin)">
          {{ hit.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nmtitle: {
      type: String,
      default: "选择设施"
    },
    nmlist: {
      type: Array,
      default: () => [
        {
          name: "001田法林",
          show: true,
          child: [
            { name: "东区一号田", isclick: false },
            { name: "中区二号田", isclick: false },
            { name: "西区二号田", isclick: false }
          ] }
      ]
    }
  },
  data() {
    return {
      zhlist: [
        {
          name: "001田法林",
          show: true,
          child: [
            { name: "东区一号田", isclick: false },
            { name: "中区二号田", isclick: false },
            { name: "西区二号田", isclick: false }
          ] }
      ]
    }
  },
  watch: {
    nmlist(newval) {
      this.zhlist = newval
      console.log(newval)
      this.chancedata()
    }
  },
  mounted() {
    this.defaultclick()
  },
  methods: {
    chancedata() {
      let testlist = this.zhlist
      this.zhlist = []
      testlist.forEach(
        item => {
          let childlist = []
          item.child.forEach(
            (hj) => {
              let iol = { name: hj.name, isclick: false }
              childlist.push(iol)
            }
          )
          let jkl = {
            name: item.name,
            child: childlist,
            show: true,
            isclick: false
          }
          this.zhlist.push(jkl)
        }
      )
    },
    // 默认选中方法
    defaultclick() {
      let ismes = this.zhlist[0]["child"][0]
      if (ismes) {
        this.getlimes(this.zhlist[0], 0, 0)
      }
    },
    // 点击详情
    getlimes(e, indexone, indextwo) {
      this.chancedata();
      //   console.log(e)
      this.zhlist[indexone]["child"][indextwo]["isclick"] = true
      this.$emit("lival", e)
    }
  }
}
</script>
<style lang="scss" scoped>
.list-temple{
    width: 270px;
    height: 100%;
    margin-left: 10px;
    background-color: rgba(0,72,90,.7);
    padding: 10px;
    .listtemple-title{
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-bottom: rgb(202, 221, 221) dashed 1px;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .list-all {
        border: solid 1px #fff;
       .list-name{
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            text-align: center;
            border-bottom: solid 1px #fff;
            padding-left: 20px;
            cursor: pointer;
            .icon-li{
                margin: 5px 4px;
                float: right;
            }
        }
        ul {
            margin: 0;
            list-style: none;
            cursor: pointer;
            padding: 0;
            width: 248px;
            text-align: center;
            li {
                margin: 0;
                line-height: 40px;
                list-style: none;
                text-align: center;
                width: 248px;
                border-bottom: #fff 1px solid;
            }
        }
        .backline {
                background-image: linear-gradient(to bottom,#75efd2,#44cec6,#0fa2ba); ;
            }
    }
}
</style>
